<template>
  <div class="player_pure" v-if="song">
    <div class="player_avatar" :style="{ backgroundImage: 'url(' + song.pic + ')' }"></div>
    <div class="player_pure_main">
      <div class="puer_header">
        <b-button type="warning" class="iconfont icon-min" width="40px" @click="closePure" />
      </div>
      <div class="puer_content">
        <div class="puer_img">
          <img :src="song.pic" alt="" />
        </div>
        <div class="puer_lyric">
          <div class="song_artion">
            <div class="song_name">
              <h3>{{ song.name }}</h3>
            </div>
            <div class="song_title">
              <div class="song_singer">
                <span class="song">歌手:</span>
                <span class="name">大朗</span>
              </div>
              <div class="song_album">
                <span class="song">专辑:</span>
                <span class="name">永远青春</span>
              </div>
            </div>
          </div>
          <PlayerLyric class="player_middle" :lyric="lyric" middle :currentTime="currentTime"></PlayerLyric>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PlayerLyric from './Player-lyric.vue'
export default {
  name: 'Pure',
  data() {
    return {}
  },
  components: { PlayerLyric },
  props: {
    song: {
      type: Object,
      default: () => {}
    },
    currentTime: {
      type: Number,
      default: 0
    },
    lyric: {
      type: String,
      default: ''
    }
  },
  methods: {
    closePure() {
      this.$parent.isPure = false
    }
  }
}
</script>

<style lang="less" scoped>
.player_pure {
  position: absolute;
  left: 0;
  bottom: 60px;
  width: 100%;
  height: calc(100vh - 120px);
  background-color: #fff;
  .player_avatar {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    filter: blur(65px);
    opacity: 0.6;
    transform: translateZ(0);
    background-color: rgb(255, 255, 255);
  }

  .player_pure_main {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 20;
    width: 100%;
    height: 100%;
    .puer_header {
      width: 100%;
      padding: 0 20px;
    }
    .puer_content {
      width: 84%;
      height: calc(100% - 40px);
      margin: 0 auto;
      display: flex;
      .puer_img {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 300px;
          height: 300px;
          border: 8px solid #52504e4d;
        }
      }
      .puer_lyric {
        width: 50%;
        position: relative;
        .song_artion {
          width: 440px;
          height: 100%;
          .song_name {
            width: 100%;
            padding-bottom: 20px;
            h3 {
              color: #fff;
            }
          }
          .song_title {
            display: flex;
            width: 100%;
            .song_singer {
              padding-right: 20px;
            }
            .song {
              color: #f9f9f9;
              font-size: 14px;
              padding-right: 4px;
            }
            .name {
              color: #fff;
              font-size: 14px;
              padding: 4px;
            }
          }
        }
        .player_middle {
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          overflow: hidden;
        }
      }
    }
  }
}
</style>
